/**
 * Geolocation API
 * 定义了一个通过承载设备实现的高阶定位信息接口，获取包括经纬度的信息。
 * 该规范既定义了一次性定位请求，也定义了监控定位信息改变的接口。
 * 本规范兼容性优秀，因为规范制定晚于接口的工业应用，
 * 因为定位信息的敏感性，该规范被实现为 permission 接口，在程序调用时抛出阻断用户交互的提示。
 * 本接口更多应用于移动端定位，PC 上往往根据IP地址等网路信息定位，常常会定位到物理服务器位置。
 */

let oBtn = document.querySelector('#getGeoBtn');
let oStatus = document.querySelector('#geoInfo');
let oMapLink = document.querySelector('#maplink');
let oBtnSw = document.querySelector('#stopWatch');

// 一次性 定位请求实例
/**
 * navigator.geolocation.getCurrentPosition(successCB[, errorCB[, optionalConfigObject]])
 * 正如上面的定义，getCurrentPosition 接口接收三个参数：
 *     successCB(position): 一参是成功回调
 *     errorCB(e): 二参是失败回调
 *     optionalConfigObject: 可选的配置对象，常见配置项包括： {
 *        enableHighAccuracy: 允许高精度
 *        maximumAge:  缓存时长，当设置了缓存是，再次请求定位信息会直接返回缓存
 *        timeout: 失败超时时间
 *     }
 */
const oneShowGeolocation = () => {
  const geo_success = (position) => {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    oStatus.textContent = '';
    oMapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
    oMapLink.textContent = `Latitude: ${latitude}°, Longitude: ${longitude}°.`;
  }

  const geo_error = (e) => {
    // Chrome 上会超时，但在搜狗浏览器（Chrome 的壳浏览器）正常
    oStatus.textContent = `ERROR(${e.code}: ${e.message})`;
  }

  const geo_options = {
    enableHighAccuracy: true,
    maximumAge: 30000,
    timeout: 27000
  }

  if(!navigator.geolocation) {
    oStatus.textContent = 'Geolocation is not supproted by your borwser';
  } else {
    oStatus.textContent = 'Locating...';
    navigator.geolocation.getCurrentPosition(geo_success, geo_error, geo_options);
  }
}

// 监听位置改变，不再是单一请求
const watchGeolocation = () => {
  const scrollMap = (position) => {
    console.log(position);
  }
  const error = (e) => {
    console.error(e);
  }
  // 这个监听的触发与 Page Visibility API 接口相关，当前窗口每次获得重新显示时触发一次。
  let watchId = navigator.geolocation.watchPosition(scrollMap);
  oBtnSw.addEventListener('click', () => {
    navigator.geolocation.clearWatch(watchId);
  }, false);
}

oBtn.addEventListener('click', () => {
  oneShowGeolocation();
}, false);
watchGeolocation();